<template>
  <view class="settingCenterMain">
    <view class="topRightCircle">
      <view></view>
    </view>
    <view class="mingLogoNameVersion">
      <image src="../../static/images/logoImg.png" mode="widthFix"></image>
      <text>盛秘书</text>
      <text>版本信息：{{ $store.state.version }}</text>
    </view>
    <view class="mineMenuBox">
      <u-cell-group>
        <u-cell-item
          icon="lock-open"
          title="修改密码"
          @click="$u.route('/pages/setting/resetUp')"
        >
        </u-cell-item>
        <u-cell-item
          icon="volume-up"
          title="系统消息"
          @click="$u.route('/pages/notice/list')"
        ></u-cell-item>
        <u-cell-item
          icon="account"
          title="关于我们"
          @click="$u.route('/pages/setting/about')"
        ></u-cell-item>
        <u-cell-item
          icon="error-circle"
          title="检测更新"
          :value="'当前版本：' + $store.state.version"
          @click="$u.throttle(checkAppVersion, 1000)"
        ></u-cell-item>
      </u-cell-group>
    </view>
    <view class="exitMain"
      ><text @click="$u.throttle(exitBtn, 1000)" class="solid"
        >退出当前账号</text
      ></view
    >
    <!-- 升级 开始 -->
    <view class="upgradeBody" v-if="appVersionInfo.status == 1">
      <view class="upgradeMain">
        <u-icon
          class="uIcon"
          name="close-circle"
          color="#fff"
          size="58"
          v-if="!appVersionInfo.forceUpdate"
          @click="appVersionInfo.status = 0"
        ></u-icon>
        <view class="h3">发现新版本：v{{ appVersionInfo.versionName }}</view>
        <view class="brief">
          <text class="title">更新内容</text>
          <text>{{ appVersionInfo.versionInfo }}</text>
          <text class="title">更新时间</text>
          <text>{{ appVersionInfo.updateTime }}</text>
		  <text class="title" v-if="equipmentType == 'ios'">请前往苹果商店更新</text>
        </view>
       <button @click="copyTap" v-if="equipmentType == 'android'">复制下载链接</button>
       <button @click="appVersionInfo.status = 1" v-if="equipmentType == 'ios'">确认</button>
         <!-- <button @click="goToDownLoad" v-if="equipmentType == 'android'">立即更新</button> -->
      </view>
    </view>
    <!-- 升级 结束 -->
    <u-modal
      v-model="show"
      :content="content"
      show-cancel-button
      @confirm="confirm"
      confirm-color="#fb4535"
    ></u-modal>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      show: false,
      content: "是否确认退出当前账号？",
      appVersionInfo: {},
	  equipmentType:'android'
    };
  },
  onLoad() {
  	this.equipmentType = this.$store.state.type;
  },
  methods: {
    exitBtn() {
      this.show = true;
    },
    confirm() {
      uni.removeStorageSync("loginInfo");
      uni.removeStorageSync("userInfo");
      this.$u.route({
        url: "/pages/login/login",
        type: "reLaunch",
      });
    },
    //检测应用版本信息
    checkAppVersion() {
      this.$u.api
        .checkAppVersion({
          appId:this.$store.state.appid,
          versionName: this.$store.state.version,
          type:this.equipmentType,
          envType:this.$store.state.envType
        })
        .then((res) => {
          if (res.status == 200) {
            if (res.result.status == 1) {
              this.appVersionInfo = res.result;
            } else {
              this.$refs.uToast.show({
                title: "已经是最新版本",
                type: "default",
                duration: 2000,
              });
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
              duration: 1200,
            });
          }
        });
    },
    //复制微信号
    copyTap() {
      let downloadUrl = this.appVersionInfo.downloadUrl;
      uni.setClipboardData({
        data:downloadUrl,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功,请打开浏览器下载",
                duration: 3000
              });
            },
          });
        },
      });
    },
    goToDownLoad() {
      window.location.href = this.appVersionInfo.downloadUrl
      // window.postMessage(this.appVersionInfo.downloadUrl);
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.settingCenterMain {
  position: relative;

  .topRightCircle {
    position: fixed;
    top: -200rpx;
    right: -300rpx;
    background: #fb4535;
    width: 600rpx;
    height: 600rpx;
    border-radius: 50%;
  }

  .topRightCircle view {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200rpx;
    height: 200rpx;
    background: #f1f1f1;
    margin: -100rpx 0 0 -100rpx;
    border-radius: 50%;
  }

  .mingLogoNameVersion {
    padding: 120rpx 60rpx 0;
  }

  .mingLogoNameVersion image {
    width: 120rpx;
    height: 120rpx;
    display: block;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }

  .mingLogoNameVersion > text {
    display: block;
    line-height: 40rpx;
  }

  .mingLogoNameVersion > text:first-of-type {
    padding-top: 10rpx;
    font-size: 40rpx;
    font-weight: bold;
  }

  .mingLogoNameVersion > text:last-of-type {
    padding-top: 10rpx;
    font-size: 28rpx;
  }

  .mineMenuBox {
    padding: 60rpx;
  }

  .exitMain {
    padding: 0 60upx 50upx;

    text {
      display: block;
      height: 80upx;
      line-height: 80upx;
      text-align: center;
      font-size: 28upx;
      color: #333;
      border-radius: 20upx;
    }
  }

  .mineMenuItem {
    position: relative;

    .switchBtn {
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -0.5em;
      z-index: 9;
    }
  }
}
.upgradeBody {
  position: fixed;
  left: 0;
  // top: 88rpx;
  top: calc(88rpx + env(safe-area-inset-top));
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .upgradeMain {
    width: 500rpx;
    height: 620rpx;
    background: url("../../static/images/upGradeBg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -250rpx;
    margin-top: -310rpx;
    border-radius: 15rpx;
    overflow: hidden;
    .uIcon {
      position: absolute;
      top: 10rpx;
      right: 0;
    }
    .h3 {
      padding-top: 240rpx;
      line-height: 40rpx;
      padding-left: 64rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    .brief {
      padding: 10rpx 64rpx 30rpx;
      text {
        display: block;
        line-height: 36rpx;
        font-size: 28rpx;
        &.title {
          font-weight: bold;
          margin-top: 15rpx;
        }
      }
    }
    button {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 75rpx;
      line-height: 75rpx;
      font-size: 32rpx;
      color: #fff;
      background: #fb4838;
      border-radius: 0;
      &::after {
        border: none;
      }
    }
  }
}
</style>
